<template>
	<view>
		<view class="head">
			<view class="head_left" @tap="back()">
				<image src="../../../static/wode/return.png" mode=""></image>
				<text>返回</text>
			</view>
			<view class="head_mid">
				我的收益
			</view>
			<view class="head_right">

			</view>
		</view>
		<view class="padding-box">
			<view class="">
				<view class="timeBox" @tap="name">
					<text>{{inputValue}}</text>
					<image class="down" src="../../../static/diqiuquan/down.png" mode=""></image>
				</view>
				<view class="moneyBox">
					<text>累计收益 <text class="moneyText">{{moneyDate.cumulativeEarnings}}元</text></text>
					<text>本月收益 <text class="moneyText">{{moneyDate.cumulativeMontlyEarnings}}元</text></text>
					<text>未结算 <text class="moneyText">{{moneyDate.not_Account}}元</text></text>
				</view>
				<view class="bodyBox">
					<view class="body_item" @tap="tomoneyItem(item.id)" v-for="(item,index) in moneyDateList" :key="index">
						<view class="item_left">
							<text class="text1">《{{item.title}}》</text>
							<text>{{item.update_time}}</text>
						</view>
						<view class="item_right">
							<text class="text2">+{{item.earnings}}</text>
							<text v-if="item.earnings_status==1">未结算</text>
							<text v-else>已结算</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<sen-set-picker ref="setpicker" :shixian="shixian" noday="true" @quxiaoButton="quxiaobutton" @quedingButton="quedingbutton"></sen-set-picker>

	</view>
</template>

<script>
	import senSetPicker from '../../../components/sen-pickerview/picker-view-set.vue'

	export default {
		components: {
			senSetPicker
		},
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				inputValue: currentDate,
				shixian: false,
				monthDay: '',
				moneyDate:'',//收益数据
				moneyDateList:[],//收益列表
			}
		},
		onShow() {
			this.monthDay=this.mGetDate(this.inputValue.split('-')[0],this.inputValue.split('-')[1])
			this.getMoneyData()
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			name: function() {
				this.$refs.setpicker.confirm(this.inputValue);
				this.shixian = true;
			},
			quxiaobutton: function() {
				this.shixian = false;
			},
			quedingbutton: function(bangdingyear, bangdingmonth) {
				this.shixian = false;
				this.inputValue = bangdingyear + "-" + bangdingmonth;
				this.monthDay = this.mGetDate(bangdingyear, bangdingmonth)
				this.getMoneyData()
			},
			getDate(type) {
				const date = new Date();

				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				} else if (type === 'now') {
					year = year;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;

				return `${year}-${month}`;
			},
			getMoneyData() {
				var me = this;
				var start_time = this.inputValue + '-01 00:00:00';
				var end_time = this.inputValue + '-' + this.monthDay + ' ' + '23:59:59'
				var data = {
					master_id: uni.getStorageSync('user_id'),
					start_time: start_time,
					end_time: end_time,
					offset: new Date().getTimezoneOffset() / 60 * -1,
				}
				this.myAjaxNew({
					model: 'user',
					controllerName: 'userAppointment',
					actionName: 'queryEarningsListPage',
					data: data,
					successBack: function(res) {
						console.log(res, '收益数据')
						me.moneyDate=res.data.data
						me.moneyDateList=res.data.data.userAppointmentEntities
						if(me.moneyDateList.length!=0){
							for(var i=0;i<me.moneyDateList.length;i++){
								me.moneyDateList[i].earnings=me.moneyDateList[i].earnings.toFixed(2)
							}
						}else{
							uni.showToast({
								title:'该月无收益数据',
								icon:'none'
							})
						}
					},
				})

			},
			mGetDate(year, month) { //获取
				var d = new Date(year, month, 0);
				return d.getDate();
			},
			tomoneyItem(id) {
				uni.navigateTo({
					url: '../../../pages/My/ProfitItem/ProfitItem?id='+id
				})
			},
		}
	}
</script>

<style scoped>
	.head {
		width: 100%;
		display: flex;
		justify-content: space-between;
		height: 128upx;
		background: #ffffff;
		padding: 0 24upx;
		z-index: 200;
		position: fixed;
		top: 0;
	}

	.head image {
		width: 20upx;
		height: 36upx;
		margin-right: 9upx;
	}

	.head_left {
		height: 82upx;
		display: flex;
		align-items: center;
		line-height: 82upx;
		color: #666666;
		font-size: 32upx;

	}

	.head_right {
		width: 92upx;
	}

	.padding-box {
		padding-top: 128upx;
	}

	.timeBox {
		display: flex;
		align-items: center;
		padding: 0 24upx;
		margin-top: 28upx;
	}

	.down {
		width: 24upx;
		height: 14upx;
		margin-left: 10upx;
	}

	.moneyBox {
		display: flex;
		justify-content: space-between;
		color: #666666;
		font-size: 26upx;
		padding: 0 24upx;
		margin: 18upx 0;
	}

	.moneyText {
		color: #FCC732;
		margin-left: 10upx;
	}

	.body_item {
		background: #FFFFFF;
		padding: 0 24upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #CCCCCC;
		font-size: 24upx;
		height: 158upx;
		border-bottom: 1upx solid #E6E6E6;
	}

	.item_left,
	.item_right {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
		height: 110upx;
	}

	.item_right {
		align-items: flex-end;

	}

	.text1 {
		color: #47CECF;
		font-size: 26upx;
	}

	.text2 {
		color: #FCC732;
		font-size: 32upx;
	}
</style>
